<template>
  <view>
    <view class="search-box">
      <view class="search-input u-flex-y-center">
        <image src="@/static/images/01_1erss.png" mode=""></image>
        <input type="text" class="u-flex-fill" placeholder="请输入关键字搜索" v-model="params.keyword" />
        <view class="search-btn" @click="_city">
          确定
        </view>
      </view>
      <view class="u-flex-between u-flex-y-center u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28">
        <up-text :text="currentCity" color="#333" size="15" bold></up-text>
        <view class="location-btn u-flex-y-center" @click="_geocoder()">
          <image src="@/static/images/01_1fr.png" mode=""></image>
          <text>重新定位</text>
        </view>
      </view>
    </view>
    <up-index-list :index-list="indexList" v-if="indexList.length">
      <up-index-item v-for="(item, index) in cityList" :key="item.first_letter">
        <up-index-anchor bgColor="#F7F6FA" :text="item.first_letter" :key="index" :id="index"
          @handleClick="handleClick"></up-index-anchor>
        <view class="city-item u-flex-y-center u-flex-between" v-for="(cell, index) in item.city" :key="cell.id"
          @click="handleCity(cell)">
          <text>{{cell.name}}</text>
          <image src="@/static/images/01_1wd.png" mode=""></image>
        </view>
      </up-index-item>
    </up-index-list>
    <u-empty mode="data" text="暂无城市" v-if="!indexList.length"></u-empty>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { first_city, geocoder } from '../../config/api';
  import { getCache, setCache } from '../../util/util';
  const params = ref({
    keyword: ''
  })
  const indexList = ref([])
  const cityList = ref([]);
  const currentCity = ref('')
  onMounted(() => {
    _geocoder()
    _city()
  })
  const _geocoder = () => {
    const systemSetting = uni.getSystemSetting()
    uni.getLocation({
      success: ({ longitude, latitude }) => {
        geocoder({ latitude, longitude }).then(res => {
          currentCity.value = res.data.name
          setCache('city', res.data.name)
          setCache('city_id', res.data.id)
        })
      },
      fail: () => {
        currentCity.value = '烟台'
        setCache('city', '烟台')
        setCache('city_id', 1421)
      }
    })
  }
  const handleCity = (item) => {
    currentCity.value = item.name
    setCache('city', item.name)
    setCache('city_id', item.id)
    uni.$u.toast('修改成功')
    params.value.keyword = ''
    _city()
  }
  // 搜索城市
  const _searchCity = (e) => {
    let cityData = ref({})
    try {
      cityList.value.forEach(item => {
        cityData.value = item.city.find(cell => cell.name.indexOf(params.value.keyword) >= 0)
        if (cityData.value) {
          throw new Error(JSON.stringify(cityData.value))
        }
      })
    } catch (e) {}
    if (cityData.value) handleCity(cityData.value)
  }
  // 所有城市
  const _city = (() => {

    first_city(params.value).then(res => {
      indexList.value = []
      cityList.value = res.data
      res.data.forEach(item => {
        indexList.value.push(item.first_letter)
      })
    })
  })
</script>

<style lang="scss" scoped>
  .search-box {
    background: #fff;
    position: sticky;
    z-index: 3;
    top: 0;
    padding: 8rpx 20rpx;

    .search-input {
      padding: 0 10rpx 0 24rpx;
      border-radius: 38rpx;
      background: #f8f8f8;
      height: 76rpx;
      font-size: 26rpx;


      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }

      .search-btn {
        width: 100rpx;
        height: 60rpx;
        background: #F87610;
        border-radius: 30rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
        font-size: 26rpx;
      }
    }

    .location-btn {
      font-size: 26rpx;
      font-weight: 500;


      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
  }

  .city-item {
    padding: 28rpx 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    color: #000;
    font-size: 28rpx;
    font-weight: 500;
    padding-right: 20rpx;
    padding-left: 60rpx;

    image {
      width: 14rpx;
      height: 20rpx;
    }
  }

  ::v-deep .u-index-list__indicator {
    transform: rotate(135deg) !important;
  }

  ::v-deep .u-index-list__indicator__text {
    transform: rotate(225deg) !important;
  }

  ::v-deep.u-index-list__letter {
    left: 0;
    right: auto !important;
  }
</style>